<script>
import Header from './Header.vue'
import Footer from './footer.vue'
import Register1 from '@views/user/register/register1.vue'
import Register2 from '@views/user/register/register2.vue'
import Register3 from '@views/user/register/register3.vue'
import { mapGetters } from 'vuex'
import Register4 from '@views/user/register/register4.vue'
import Register5 from '@views/user/register/register5.vue'

export default {
  components: { Register4, Register3, Register5, Register2, Register1, Header, Footer },
  data: function() {
    return { step: 3 }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    if (this.userInfo) {
      this.step = 2
    }
  },
  methods: {
    stepChange($event) {
      console.log($event)
      this.step = $event
    },
  },
}
</script>

<template>
  <div class="">
    <register1 v-if="step === 1" @next="step = 2"></register1>
    <register2 v-if="step === 2" @next="$router.push('/user/login')"></register2>
    <register3 v-if="step === 3" @next="stepChange($event)"></register3>
    <register4 v-if="step === 4" @next="step = 5"></register4>
    <register5 v-if="step === 5"></register5>
  </div>
</template>

<style scoped lang="less"></style>
